<template>
  <div class="sidebar">
    <div class="sidebar_top">
<!--      <img :src="img">-->
      <div class="sidebar_img">
        <img :src="$baseImg + sidebarData.avatar" alt="">
      </div>
      <div class="sidebar_title">
        <p class="p1">{{ sidebarData.user_name }}</p>
        <p class="p2">{{ sidebarData.email }}</p>
      </div>
    </div>
    <div class="sidebar_bottom">
      <router-link class="items sidebar_bottom_item" to="/layout/user">
        <div class="lamy1"></div>
        <div class="lamy2"></div>
        <i class="el-icon-edit project_color sidebar_bottom_item_i"></i>
        个人概述
        <div class="lamy3"></div>
        <div class="lamy4"></div>
      </router-link>
      <router-link class="items sidebar_bottom_item" to="/layout/inn">
        <div class="lamy1"></div>
        <div class="lamy2"></div>
        <i class="el-icon-time project_color sidebar_bottom_item_i"></i>
        技术客栈
        <div class="lamy3"></div>
        <div class="lamy4"></div>
      </router-link>
      <router-link class="items sidebar_bottom_item" to="/layout/work">
        <div class="lamy1"></div>
        <div class="lamy2"></div>
        <i class="el-icon-data-analysis project_color sidebar_bottom_item_i"></i>
        工作历程
        <div class="lamy3"></div>
        <div class="lamy4"></div>
      </router-link>
      <router-link class="items sidebar_bottom_item" to="/layout/porject">
        <div class="lamy1"></div>
        <div class="lamy2"></div>
        <i class="icon el-icon-set-up project_color sidebar_bottom_item_i"></i>
        项目案例
        <div class="lamy3"></div>
        <div class="lamy4"></div>
      </router-link>
      <router-link class="items sidebar_bottom_item" to="/layout/live">
        <div class="lamy1"></div>
        <div class="lamy2"></div>
        <i class="el-icon-cloudy-and-sunny project_color sidebar_bottom_item_i"></i>
        生活集锦
        <div class="lamy3"></div>
        <div class="lamy4"></div>
      </router-link>
    </div>
    <div class="sidebar_last">
      <img src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724203720_286515127.png" alt="">
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      email:'',
      name:'',
      img:"",
      sidebarData:[],
    }

  },
  methods: {

    getUserInfo() {
      this.$axios.getUserInfo().then(res => {
        console.log(res.data)
        this.sidebarData = res.data
      })

    },

  },
  mounted() {
    // this.getData()
    this.getUserInfo()
  },
}
</script>

<style lang="less">
.sidebar{
  position: relative;
  overflow: hidden;
  background: #425c5a;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0 1.5625vw 1.5625vw 0;

  .sidebar_top{
    background: #3d5654;
    padding-top: 2.083vw;
    padding-bottom: 2.292vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;

    .sidebar_img{
      display: flex;
      width: 7.865vw;
      height: 7.865vw;
      margin: 0 auto 0vw auto;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .p1{
      font-size: 1.198vw;
      margin-top: 0.7vw;
      margin-bottom: 0.321vw;
    }

    .p2{
      font-size: .833vw;
    }
  }

  .sidebar_bottom{
    padding-top: 2.604vw;
    flex: 1;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    background: #425c5a;
    .el-menu{
      background: #425c5a;
      width: 100%;
    }

    .sidebar_bottom_item{
      display: flex;
      align-items: center;
      color: #fff;
      font-size: .9375vw;
      padding-left: 1.823vw;
      width: 12.323vw;
      height: 3.333vw;
      margin-bottom: 0.78125vw;

      .sidebar_bottom_item_i{
        font-size: 1.146vw;
        color: #ba9537;
        margin-right: 0.833vw;
      }
    }
    .sidebar_bottom_item:last-child .lamy3,.sidebar_bottom_item:last-child .lamy4{
      top: 3.32vw;
    }

    .activation {
      background: #e6f1f0;
      border-radius: 1.667vw 0 0 1.667vw;
      color: #425c5a;
      position: relative;
    }

    .activation .lamy1, .activation .lamy2 {
      width: 3.385vw;
      height: 1.667vw;
      position: absolute;
      top: -1.667vw;
      right: 0;
    }
    .activation .lamy2{
      background: #e6f1f0;
    }
    .activation .lamy1{
      background: #425c5a;
      border-bottom-right-radius: 4.2969vw !important;
      z-index:10;
    }

    .activation .lamy3, .activation .lamy4 {
      width: 3.385vw;
      height: 1.667vw;
      position: absolute;
      top: 3.35vw;
      right: 0;
    }
    .activation .lamy4{
      background: #e6f1f0;
      top: 3.3vw;
    }
    .activation .lamy3{
      background: #425c5a;
      border-top-right-radius: 4.2969vw !important;
      z-index:10;
      top: 3.35vw;

    }

  }

  .sidebar_last{
    position: absolute;
    bottom: -2vw;
    width: 10.323vw;
    left: 50%;
    transform: translate(-50%,-50%);
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }

}


</style>